<template>
  <div>
    <el-card class="box-card  loginCl">
      <div slot="header" class="clearfix">
        <h3 style="align-content: center;text-align: center">{{registerurl}}用户注册</h3>
      </div>
      <div class="text item">
        <!-- 上传头像 -->
        <el-upload style="align-content: center;text-align: center;margin-bottom: 20px"
            action="api/user/headphoto"
            list-type="picture-card"
                   name="headName"
            :auto-upload="true"
            :on-success="uploadSuccess">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt=""
            >
            <span class="el-upload-list__item-actions">

        <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>

      </span>
          </div>

        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <h4 style="text-align: center;align-content: center">上传头像</h4>

        <!--注册用户名和密码-->
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-row class="row-class">
            <el-form-item label="用户名" prop="username">
              <el-input v-model.number="ruleForm.username"></el-input>
            </el-form-item>
          </el-row>
          <el-row class="row-class">
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
          </el-row>
          <el-form-item style="align-content: center;text-align: center">
            <el-button type="primary" @click="register">注册</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>

      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "RegisterVue",
  props:{
    registerurl:String //父子传值
  },
  data(){
    return{
      ruleForm:{
        username:'',
        password:'',
      },
      disabled: false,
      imgSrc:'',
      dialogImageUrl: '',
      dialogVisible: false,
      rules:{
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 10个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请选输入密码', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    uploadSuccess(response, file, fileList){
      console.log(response)
      this.imgSrc=response
      this.$store.state.headphoto=response
      console.log(file)
      console.log(fileList)
    },
    handleRemove(file) {
      this.dialogVisible = false;
      console.log(file);
      //后台删除
    },
    cancel() {
      this.ruleForm.username=''
      this.ruleForm.password=''
    },
    register(){
      let fd = new FormData
      fd.append("username",this.ruleForm.username)
      fd.append("password",this.ruleForm.password)
      fd.append("imgSrc",this.imgSrc)
      this.$axios.post('api/user/register',fd).then(r=>{
        if (r.data === true){
          this.$message.success("注册成功")
          this.$router.push("/login")
          this.$emit("closeWind")
        }else {
          this.$message.error("注册失败")
          this.username=''
          this.password=''
        }
      })
    }
  }
}
</script>

<style scoped>
.loginCl{
  margin:10% 20% 50% 20%;
  width:40%
}
.row-class{
  margin-right: 15%;
  margin-left: 10%;
}
</style>